<template>
    <div class="imglist">
      <ul class="photo-list">
         <li class="mui-card" v-for = "(item,index) in imglist" :key="index">            
				<div class="mui-card-header mui-card-media">
					<div class="mui-media-body">
						<h4>{{item.title}}</h4>
					</div>               
				</div>
				<div class="mui-card-content" >
					<img :src="item.img_url" >
				</div>
				<div class="info">
                    <p class="info-title">&nbsp;&nbsp;&nbsp;&nbsp;{{item.zhaiyao}}</p>
                </div>
         </li>
      </ul>
			
    </div>
</template>
<script>
import {getlistimg} from "@/api/index.js"; 
    export default {
       data(){
          return{
            id: this.$route.params.id,
            imglist:[],
          }
       },
       created(){
         this.gitimg()
       },
       methods:{
         gitimg(){
             getlistimg(this.id).then(res =>{
                 console.log(res);
                 if (res.status === 0) {
                    this.imglist = res.message;
                    }
             })
         }
       }
    }
</script>
<style lang="scss" scoped>
.mui-card{
    margin: 0;
}
.photo-list {
  list-style: none;
  margin: 0;
  padding: 5px;
  padding-bottom: 0;
  li {
    background-color: #fff;
    margin-bottom: 10px;
    position: relative;
    img {
      width: 100%;
      vertical-align: middle;
    }
    .mui-media-body{
        margin-left: 10px;
        h4{
            font-size: 16px;
        }
    }
    .info {
      color: white;
      text-align: left;
      position: absolute;
      bottom: 0;
      background-color: rgba(0, 0, 0, 0.3);
      max-height: 84px;
      .info-title {
        font-size: 14px;
      }
      .info-body {
        font-size: 13px;
      }
    }
  }
}
</style>
